import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import styles from '../NewApply/ApplyDetail.less'
import sealStyle from '../RevokeApply/RevokeSeal.less'
import DetailItem from '@/components/DetailItem'
import { ElForm } from 'element-ui/types/form'
import OptionLine from '@/components/OptionLine'

interface IRevokeSealData {
  agentName: string
  agentMobileDes: string
  agentLicenseNumberDes: string
  agentMobile: string
  agentLicenseNumber: string
  agentLicenseType: number
  reason?: string
  reasonType: number
  fileKey?: string
  url?: string
}

const sealData: IRevokeSealData = {
  agentName: '',
  agentLicenseType: 1,
  agentMobile: '',
  agentLicenseNumber: '',
  agentLicenseNumberDes: '',
  agentMobileDes: '',
  reason: '',
  reasonType: 1,
  fileKey: '',
  url: '',
}

const formLabelWidth3: string = '48px'
const formLabelWidth4: string = '60px'
const formLabelWidth5: string = '84px'
const formLabelWidth8: string = '72px'
const detailData: any = [
  {
    title: '用章机构基本信息',
    child: [
      {
        key: 'organizeName',
        label: '机构名称',
        content: '',
        labelWidth: formLabelWidth3,
      },
      {
        key: 'organizeType',
        label: '机构类型',
        content: '',
        labelWidth: formLabelWidth8,
      },
      {
        key: 'organizeCardType',
        label: '证照类型',
        content: '',
        labelWidth: formLabelWidth3,
      },
      {
        key: 'organizeCardId',
        label: '证照号码',
        content: '',
        labelWidth: formLabelWidth8,
      },
      // { key: "organizeLevel", label: "行政等级", content: "", labelWidth: formLabelWidth3 }
    ],
  },
  {
    title: '经办人基本信息',
    child: [
      {
        key: 'agentName',
        label: '经办人姓名',
        content: '',
        labelWidth: formLabelWidth4,
      },
      {
        key: 'agentMobileDes',
        label: '经办人手机号',
        content: '',
        labelWidth: formLabelWidth8,
      },
      {
        key: 'agentLicenseTypeName',
        label: '经办人证件类型',
        content: '',
        labelWidth: formLabelWidth5,
      },
      {
        key: 'agentLicenseNumberDes',
        label: '经办人证件号',
        content: '',
        labelWidth: formLabelWidth8,
      },
    ],
  },
  {
    title: '印章信息',
    id: 3,
    child: [
      {
        key: 'sealType',
        label: '印章类别',
        content: '',
        labelWidth: formLabelWidth3,
        tips:
          '组织机构的电子法定名称章需要上级主管部门审批，其他专用章（包括经济合同章、财务专用章等）。在名称式样上应与单位正式印章有所区别，经本单位领导批准后可以申请。',
      },
      {
        key: 'sealName',
        label: '印章名称',
        labelWidth: formLabelWidth8,
        content: '',
      },
      {
        key: 'sealUseType',
        label: '用章方式',
        labelWidth: formLabelWidth3,
        content: '',
        tips:
          '选择Ukey签章需要硬件介质UKey盖章，选择云签章可用于开放服务使用API调用。',
      },
    ],
  },
]

const rules = {
  reason: [
    { required: true, message: '原因不能为空', trigger: 'change' },
    { max: 255, message: '不能超过255个字符', trigger: 'change' },
  ],
}

@Component({})
export default class LossSeal extends Vue {
  @Prop({ default: '挂失印章申请' }) private title!: string
  @Prop({}) private data!: any
  @Prop({ default: false }) private visible!: boolean
  @Prop({ default: false }) private saveLoading!: boolean
  @Prop({ default: '' }) private uploadUrl!: string
  @Prop({ default: false }) private showTimeline!: boolean
  @Prop({ default: false }) private isEdit!: boolean
  @Prop({ default: false }) private showSubmit!: boolean
  @Prop({ default: true }) private isLoss!: boolean
  @Prop({}) private sealOption!: any[]
  @Prop({ default: '挂失' }) private content!: string
  private sealUrl = ''
  private detailData = []

  private sealData: IRevokeSealData = {
    agentName: '',
    agentLicenseType: 1,
    agentMobile: '',
    agentLicenseNumber: '',
    agentLicenseNumberDes: '',
    agentMobileDes: '',
    reason: '',
    reasonType: 1,
    fileKey: '',
  }

  private formLabelWidth1 = '50px'
  private formLabelWidth2 = '84px'
  private formLabelWidth3 = '60px'

  private imgVisible = false

  private file: any = {
    status: 'init',
  }

  protected render(h: any) {
    return (
      <div class={{ [styles.sealDetail]: true }}>
        <el-dialog
          title={this.title}
          custom-class="custom-dialog"
          width={'700px'}
          close-on-click-modal={false}
          close-on-press-escape={false}
          visible={this.visible}
          {...{
            on: { 'update:visible': this.visibleChange },
          }}
        >
          <el-form
            hide-required-asterisk
            class={styles.sealForm}
            {...{ props: { model: this.sealData } }}
            ref="lossForm"
            rules={rules}
          >
            {this.detailData &&
              this.detailData.map((item: any, index: number) => (
                <DetailItem
                  class={styles.detailItem}
                  key={index}
                  single={item.single}
                  data={item.child}
                  title={item.title}
                />
              ))}

            {this.isLoss &&
              (this.isEdit ? (
                <div class={{ [sealStyle.detailForm]: true }}>
                  <p class={styles.panel}>
                    {this.content === '挂失' ? (
                      <span class={styles.required}>*</span>
                    ) : (
                      ''
                    )}
                    {this.content}原因
                  </p>
                  <div class="pl20 pr30">
                    <el-form-item prop="reason" class="ml10" label-width="0">
                      <el-input
                        type="textarea"
                        rows={3}
                        placeholder={`请输入${this.content}原因`}
                        v-model={this.sealData.reason}
                      />
                    </el-form-item>
                  </div>
                </div>
              ) : (
                <div class={{ [sealStyle.detailForm]: true, mt15: true }}>
                  <p class={styles.panel}>{this.content}原因</p>
                  <div class="pl30 pr30">{this.sealData.reason}</div>
                </div>
              ))}
            {this.sealOption && this.sealOption.length > 0 && (
              <OptionLine
                panelTitle={`${this.content}申请信息`}
                class={styles.optionLine}
                sealOption={this.sealOption}
              />
            )}
            {/* <img src={this.sealUrl} /> */}
          </el-form>
          <div slot="footer">
            <el-button
              onClick={() => {
                this.$emit('visibleChange', false)
              }}
            >
              关闭
            </el-button>
            {this.showSubmit ? (
              <el-button
                type="primary"
                class={[
                  {
                    'btn-primary': true,
                    'btn-primary-hover': this.validField(),
                  },
                ]}
                disabled={this.saveLoading}
                onClick={() => {
                  this.save(true)
                }}
              >
                提交
              </el-button>
            ) : (
              ''
            )}
          </div>
        </el-dialog>
      </div>
    )
  }

  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }

  @Watch('visible')
  private visibleHandler(val: boolean) {
    if (val && this.data) {
      detailData.forEach((detail: any) => {
        if (detail.id === 3) {
          detail.title = `${this.content}印章信息`
        }
        detail.child.forEach((item: any) => {
          item.content = this.data[item.key]
        })
      })
      rules['reason'][0].required = `${this.content}` === '挂失'
      rules['reason'][0].message =
        `${this.content}` === '挂失' ? '挂失原因不能为空' : '补发原因不能为空'
      this.sealData = Object.assign({}, sealData, this.data)
      this.sealData.reason = this.data.applyReason
      this.detailData = detailData
      this.sealUrl = this.data.sealPicUrl
    }
    this.$nextTick(() => {
      this.$refs.lossForm && (this.$refs.lossForm as ElForm).clearValidate()
    })
  }

  private validField() {
    return !this.isLoss || !!this.sealData.reason
  }

  private save(flag: boolean) {
    ;(this.$refs.lossForm as ElForm).validate((val: boolean) => {
      if (val) {
        const data = Object.assign({}, this.sealData)
        this.$emit('save', {
          isLoss: this.isLoss,
          isReissue: this.content === '补发',
          seal: data,
        })
      }
    })
  }
}
